<script setup lang="ts">
import type { ArticleItem, ArticleResData } from '@/types/data';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useChannelStore } from '@/store/channel'

const store = useChannelStore()

const articleList = ref<ArticleItem[]>([])
watch(
    () => store.channelId,
    async () => {
        const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles', {
            params: {
                channel_id: store.channelId,
                timestamp: Date.now()
            }
        })
        articleList.value = res.data.data.results
        // console.log(articleList.value);
    },
    {
        immediate: true
    })

</script>

<template>
    <div class="article-list">
        <div class="article-item" v-for="item in articleList" :key="item.art_id">
            <p class="title">{{ item.title }}</p>
            <img class="img" v-for="(src, i) in item.cover.images" :key="i" :src="src" alt="">
            <div class="info">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate }}</span>
            </div>
        </div>
    </div>
</template>